import React from 'react';
import {
    List,
    Datagrid,
    Edit,
    Create,
    SimpleForm,
    DateField,
    TextField,
    EditButton,
    DisabledInput,
    TextInput,
    LongTextInput,
    Filter,
    DateInput
} from 'react-admin';
import BookIcon from '@material-ui/icons/Book';
import {withStyles} from '@material-ui/core/styles';

export const PostIcon = BookIcon;
const styles = {
    container: {
        fontSize: '13px',
        color: '#a8a8a8'
    },
    item: {
        fontSize: '15px',
    },
};
const PostFilter = (props) => (
    <Filter {...props}>
        <TextInput label="Search" source="q" alwaysOn/>
    </Filter>
);

export const PostList = withStyles(styles)(({classes, ...props}) => (
    <List {...props} title={"显示标题"} className={classes.container} filters={<PostFilter/>}>
        <Datagrid>
            <TextField source="title"
                       label={"标题"}
                       style={styles.container}
                       headerClassName={classes.item}/>
            <DateField source="data"
                       label={"时间"}
                       headerClassName={classes.item}
                       style={styles.container}/>
            <TextField source="url"
                       label={"路径"}
                       headerClassName={classes.item}
                       style={styles.container}/>
        </Datagrid>
    </List>
));

const PostTitle = ({record}) => {
    return <span>Post {record ? `"${record.title}"` : ''}</span>;
};

export const PostEdit = (props) => (
    <Edit title={<PostTitle/>} {...props}>

        <SimpleForm>
            <TextInput source="title"/>
            <TextInput source="teaser" options={{multiLine: true}}/>
            <LongTextInput source="body"/>
            <DateInput label="Publication date" source="published_at"/>
            <TextInput source="average_note"/>
        </SimpleForm>
    </Edit>
);

export const PostCreate = (props) => (
    <Create title="Create a Post" {...props}>
        <SimpleForm>
            <TextInput source="title"/>
            <TextInput source="teaser" options={{multiLine: true}}/>
            <LongTextInput source="body"/>
            <TextInput label="Publication date" source="published_at"/>
            <TextInput source="average_note"/>
        </SimpleForm>

    </Create>
);